<template>
	<view class="All">
		<view class="hello">输入验证码</view>
		<view class="welcome">已发送 4 位验证码至 {{phone}}</view>
		<view class="code">
			<input type="text" ref=code1 value="" @input='codeInput'/>
			<input type="text" ref=code2 value="" @input='codeInput'/>
			<input type="text" ref=code3 value="" @input='codeInput'/>
			<input type="text" ref=code4 value="" @input='codeInput'/>
		</view>
		<view class="padding-tb-sm text-right next" @tap="gotoHome" ><button class="button" :class="btnClass" >确定</button></view>
		<view class="agree">
			<text class="agreeLeft">登录即同意</text>
			<text class="agreeRight" >《乐智出游用户协议》</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:'',
				phone:13181919665,
				index:0
			}
		},
		onLoad(options) {
			
		},
		computed:{
			btnClass(){
				return this.code.length===4?'bg-purple':'line-gray';
			}
		},
		methods: {
			codeInput(e){
				this.code+=e.target.value;
				 console.log(this.code) 
				 // let ref=[]
			  //  ref.push(this.$refs.code1);
			  //  ref.push(this.$refs.code2);
			  //  ref.push(this.$refs.code3);
			  //  ref.push(this.$refs.code4);
			  //  this.index++;
			  //  ref[this.index].focus()
			},
		   codeCheck(){
			   if(this.code.length!==4)return false;
			   console.log(this.code)
			   return true
		   },
		   gotoHome(){
			   if(!this.codeCheck())return;
			   uni.switchTab({
					url:'../index/index',
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
			   })
		   }
		}
	}
</script>

<style scoped >
	.All{
		width:100%;
		height:100vh;
		background:rgba(255,255,255,1);
		opacity:1;
		padding: 30px 30px 0;
	}
	.hello{
		padding-top: 10vh;
		font-size:60rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		opacity:1;
	}
	.welcome{
		font-size:16px;
		font-family:PingFang SC;
		color:rgba(133, 136, 139, 1.0);
		opacity:1;
	}
	.phone{
		/* height: 5vh; */
		margin-top: 8vh;
		background-color: #dcdbdd;
		border-radius:60rpx ;
	}
	.pwd{
		height: 8vh;
		margin-top: 4vh;
		background-color: #dcdbdd;
		border-radius:60rpx ;
	}
	.phoneInput{
		height: 8vh;
		font-size:46rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		opacity:1;
		padding-left: 60rpx;
	}
	.phonePlace{
		font-size:40rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#F8F8F8;
		opacity:1;
	}

	.agree{
		padding-top: 8vh;
		display: flex;
		justify-content: center;
	}
	.agreeLeft{
		height:17px;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		line-height:17px;
		color:rgba(153,153,153,1);
		opacity:1;
	}
	.agreeRight{
		height:17px;
		font-size:15px;
		font-family:PingFang SC;
		font-weight:500;
		line-height:17px;
		color:rgba(255,177,0,1);
		opacity:1;
	}
	.button{
		margin-top: 4vh;
		width:100%;
		height:45px;
		background:#999999;
		opacity:1;
		border-radius:44px;
		color: #FFFFFF;
	}
	.code{
		width: 100%;
		height:50rpx ;
		display: flex;
		justify-content: space-between;
		margin-top: 100rpx;
	}
	.code input{
			width:94rpx;
			height:94rpx;
			background:rgba(250,250,250,1);
			opacity:1;
			font-size: 50rpx;
			border-radius:12px;
			text-align: center;
			color:rgba(133,99,220,1);
			font-weight:500;
	}
	.bg-purple{
		background-color: #8563DC;
	}
	.line-gray{
		background-color: #999999;
	}
</style>